<template>
  <div class="header-user">
    <img :src="avatar" />
    <div>
      <h2>{{ getTime }} {{nickName}}，祝你开心每一天！</h2>
      <p>交互专家 |技术部</p>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  nickName: string,
  avatar: string,
}

defineProps<Props>()

const getTime = computed(()=>{
  const time = new Date()
  const hours = time.getHours()
  let state = ''
  if(hours >= 0 && hours <=10){
    state = "早上好！";
  }else if(hours > 10 && hours <=14){
    state = "中午好！";
  }else if(hours > 14 && hours <=18){
    state = "下午好!";
  }else if(hours > 18 && hours <=24){
    state = "晚上好!";
  }
  return state
})
</script>

<style scoped lang="scss">
.header-user{
  img{
    width: 85px;
    height: 85px;
    border-radius: 50%;
    margin:-27px 20px 0px 25px;
    float: left;
  }
  h2{
    margin-top: 30px;
    color: black;
    font-weight: bold;
  }
  p{
    margin-top: -8px;
    color:gray;
  }
}
@media only screen and (max-width: 992px)
and (min-width: 200px){
  .header-user {
    display: flex;
    justify-content: start;
    align-items: center;
  }
}
</style>
